<template>
      <div  class="user-avatar" @click="changeRoute2(myPath)" :style="{backgroundColor:randomColor,width:size,height:size,borderRadius:borderR}">
        <img  :src="src"  v-if="src" alt=""/>
        <p  v-if="!src">{{firstWord||'云'}}</p>
      </div>
</template>


<script>

  export default {
    name:'yunAvatar',
    props:{
      src:String,
      name:{
        type: String,
        default: ''
      },
      userId:String,
      size:String,
      borderR:String,
    },

    data(){
      return {
          colorArr:['#A3A7D2',
            '#B9A3D2',
            '#D2A3CE',
            '#D2A3A3',
            '#9FBFD3',
            '#9FD3D3',
            '#9FD3B5',
            '#BBD39F','#D3CF9F','#DEBAA7'],
      }
    },

    computed:{
      randomColor(){
        let randomNum = Math.floor(Math.random() * 10);
        return this.colorArr[randomNum];
      },
      firstWord(){
        if(this.name){
          return this.name.slice(0,1)
        }
      },

      myPath(){
        if(!this.userId){
          return ''
        }
        else{
          return '/u/'+this.userId+'/blog'
        }
      }
    },
      methods:{

          changeRoute2(r){
            if(r){
              let routeUrl = this.$router.resolve({
                path: r
              });
              window.open(routeUrl.href,'_blank')
            }

          },
      }
  }

</script>


<style lang="scss" scoped>
  .user-avatar{
    width:48*$length;
    height:48*$length;
    border-radius:50%;
    overflow: hidden;
    background-color: #000;
    @extend %cursorPointer;
    @extend %flex-row-center;
    img{
      max-width:100%;
      max-height:100%;
    }
    p{
      @include fontStyle(14,48,700,#fff,center)
    }
  }
</style>
